<template>
  <div class="shop-content">
    <div class="left">
      <div class="product-type"
           v-for="category in categories"
           :class="{'product-type':true,'product-type-active':currentTab===category.tab}"
           :key="category.name"
           @click="()=>handleCategoryClick(category.tab)"
      >{{ category.name }}
      </div>
    </div>
    <div class="right">
      <div class="product-info" v-for="item in list" :key="item._id">
        <img :src="item.imgUrl" alt="" class="product-pic">
        <div class="product-intro">
          <p class="product-name">{{ item.name }}</p>
          <p class="exchange">月售{{ item.sales }}件</p>
          <div class="price-info"><span class="discount-price">￥{{ item.price }}</span>
            <span class="price">${{ item.oldPrice }}</span></div>
        </div>
        <div class="product-number">
          <span class="minus" @click="()=>{changeCartItem(shopId,shopName,item._id,item,-1)}">-</span>
          <span class="number">
          {{ cartList?.[shopId]?.productList[item._id]?.count || 0 }}
          </span>
          <span class="plus" @click="()=>{changeCartItem(shopId,shopName,item._id,item,1)}">+</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, ref, toRefs, watchEffect } from 'vue'
import * as request from '@/utils/request'
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '@/views/shop/commonCartEffect'

const categories = [{
  name: '全部商品',
  tab: 'all'
},
{
  name: '秒杀',
  tab: 'seckill'
},
{
  name: '新鲜水果',
  tab: 'fruit'
}
]
const useTabEffect = () => {
  const currentTab = ref(categories[0].tab)
  const handleCategoryClick = (tab) => {
    currentTab.value = tab
  }
  return {
    handleCategoryClick,
    currentTab
  }
}
const useCurrentListEffect = (currentTab, shopId) => {
  const content = reactive({ list: [] })
  console.log('currentTab', currentTab)
  const getContentData = async () => {
    const result = await request.get(`/api/shop/${shopId}/products`, {
      tab: currentTab.value
    })
    content.list = result.data
  }
  watchEffect(() => {
    getContentData()
  })
  const { list } = toRefs(content)
  return {
    list
  }
}
export default {
  name: 'ShopContent',
  props: ['shopName'],
  setup () {
    const {
      currentTab,
      handleCategoryClick
    } = useTabEffect()

    const route = useRoute()
    const shopId = route.params.id
    const { list } = useCurrentListEffect(currentTab, shopId)
    const { changeCartItem, cartList } = useCommonCartEffect()
    return {
      list,
      categories,
      currentTab,
      handleCategoryClick,
      cartList,
      shopId,
      changeCartItem
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-content {
  margin-top: .10rem;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5rem;
  bottom: .5rem;

  .left {
    background: #F5F5F5;
    border-radius: .02rem;
    width: .76rem;
    height: 100%;
    overflow-y: auto;

    .product-type {
      height: .4rem;
      background: #F5F5F5;
      border-radius: .02rem;
      text-align: center;
      font-size: .14rem;
      color: #333333;
      line-height: .40rem;

      &-active {
        background: #FFFFFF;
      }
    }
  }

  .right {
    padding-left: .16rem;
    flex: 1;
    overflow-y: auto;

    .product-info {
      display: flex;
      height: .8rem;
      width: 2.65rem;
      border-bottom: .01rem solid #F1F1F1;
      padding: .12rem 0 .16rem 0;
      position: relative;

      .product-pic {
        width: .68rem;
        height: .68rem;
        margin-right: .16rem;
      }

      .product-intro {
        flex: 1;

        .product-name {
          font-size: .14rem;
          color: #333333;
          font-weight: bold;
          margin: 0 0;
        }

        .product-exchange {
          margin: .06rem 0;
          font-size: 12px;
          color: #333333;
          line-height: 16px;
        }

        .price-info {
          line-height: 20px;

          .discount-price {
            display: inline-block;
            font-size: 14px;
            color: #E93B3B;
          }

          .price {
            margin-left: .06rem;
            display: inline-block;
            font-size: 10px;
            color: #999999;
            text-decoration: line-through;
          }

        }
      }

      .product-number {
        position: absolute;
        right: 0;
        bottom: 0.24rem;

        .minus, .plus {
          display: inline-block;
          width: .2rem;
          height: .2rem;
          border-radius: 50%;
        }

        .minus {
          width: .18rem;
          height: .18rem;
          border: .01rem solid #666666;
          font-size: .16rem;
          line-height: .16rem;
          text-align: center;
        }

        .number {
          margin: 0 .11rem;
          font-size: .14rem;
        }

        .plus {
          background-color: #0091FF;
          font-size: .18rem;
          line-height: .18rem;
          text-align: center;
          color: white;
        }
      }
    }
  }
}

</style>
